<template>
  <!-- 加载  -->
  <div style="height: 100vh;width: 100%" v-if="isLoading" class="bg">
    <dv-loading>Loading...</dv-loading>
  </div>
  <div v-else>
    <!--  主体  -->
    <el-container class="bg">
      <!--   顶部时间   -->
      <el-header>
        <span class="nowtime">{{ nowTime }}</span>
        <top-header/>
      </el-header>
      <!--   主体内容   -->
      <el-main>
        <div class="main-content">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <Dashboard/>  <!-- 仪表盘 -->
                <Ringlike/>   <!-- 环形图 -->
                <Inventory/>  <!-- 库存 -->
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <dv-decoration-7 style="width:100%;height:30px;margin: 5px">数据总览</dv-decoration-7>
                <Overview/>   <!-- 数据总览 -->
                <SalePlan/>   <!-- 销售计划 -->
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <SaleStatistics/> <!-- 销售统计 -->
                <SaleRanking/>    <!-- 销售排行 -->
                <Production/>     <!--  生产 -->
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>

</template>
<script>
import topHeader from "@/views/visualized/topHeader.vue";
import Dashboard from "@/views/visualized/Dashboard.vue";
import Ringlike from "@/views/visualized/Ringlike.vue";
import SalePlan from "@/views/visualized/SalePlan.vue";
import SaleStatistics from "@/views/visualized/SaleStatistics.vue";
import SaleRanking from "@/views/visualized/SaleRanking.vue";
import Production from "@/views/visualized/Production.vue";
import Inventory from "@/views/visualized/Inventory.vue";
import Overview from "@/views/visualized/Overview.vue";

export default {
  name: "index",
  components: {topHeader, Dashboard, Ringlike, SalePlan, SaleStatistics, SaleRanking, Production, Inventory, Overview},
  data() {
    return {
      timer: "", //定义一个定时器
      nowTime: "",
      isLoading: true
    }
  },
  mounted() {
    this.getTime()
    this.cancelLoading()
  },
  methods: {
    getTime() {
      this.timer = setInterval(() => {
        let timeDate = new Date();
        let year = timeDate.getFullYear();
        let mounth = timeDate.getMonth() + 1;
        let day = timeDate.getDate();
        let hours = timeDate.getHours();
        hours = hours >= 10 ? hours : "0" + hours;
        let minutes = timeDate.getMinutes();
        minutes = minutes >= 10 ? minutes : "0" + minutes;
        let seconds = timeDate.getSeconds();
        seconds = seconds >= 10 ? seconds : "0" + seconds;
        let week = timeDate.getDay();
        let weekArr = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ];

        this.nowTime = `${year}-${mounth}-${day} ${weekArr[week]} ${hours}:${minutes}:${seconds}`
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.isLoading = false;
      }, 2000);
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>
<style lang="scss" scoped>
.bg {
  background-image: url('../../assets/images/bg.png');
  background-size: 100% 100%;
  background-color: #030409;
  box-shadow: 0 0 3px blue;
  color: #fff;
  width: 100%;
  height: 100%;
}

.nowtime {
  position: absolute;
  right: 100px;
  top: 5px;
}

</style>
